<script setup>
import { reactive, nextTick } from 'vue'
import roleApi from '@/api/system/RoleApi'
import useViewEvent from '@/core/hooks/useViewEvent'
const state = reactive({
  visible: false,
  loading: false, // 加载开关
  expandKeys: [], // 展开的ROWID
  privilege: {}
})
// 表单结构
const original = {
  id: '',
  code: '',
  name: '',
  notes: '',
  menus: []
}
// 表单数据
const formState = reactive({})
// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: roleApi.getFormModelById, formState: formState, original: original })

// 重写初始化 Initalize 初始化
const initializationData = primaryKey=>{
  InitializeData(primaryKey).then(()=>{
    console.info('重写初始化')
    //
    nextTick(()=>{
      state.expandKeys = []
      formState.menus.forEach(item=>{
        state.expandKeys.push(item.moduleId)
      })
    })
  })
}
/*====权限列表相关=======================*/
// 定义列表字段
const columns = [
  { title: '名称', dataIndex: 'moduleName', width: '180px'},
  { title: '标识', dataIndex: 'moduleCode', width: '200px' },
  { title: '操作', dataIndex: 'actions' }
]
//向父组件暴露方法和属性
defineExpose({ 'InitializeData': initializationData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看角色信息`"
    placement="right"
    :width="'80%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="用户名">{{ formState.code }}</a-descriptions-item>
          <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
          <a-descriptions-item label="权限">
            <a-table
              v-model:expanded-row-keys="state.expandKeys"
              :columns="columns"
              :data-source="formState.menus"
              :pagination="false"
              :row-key="record=>record.moduleId">
              <!-- 字段 -->
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'actions'">
                  <span v-for="item in record.acts" :key="item.value">
                    <a-tag v-if="record?.hasOperate?.indexOf(item.value) >-1" color="orange">{{ item.label }}</a-tag>
                  </span>
                </template>
              </template>
            </a-table>
          </a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </a-card>
  </a-drawer>
</template>